﻿.grid {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    align-items: flex-start;
    justify-content: center;
}

    .grid .cell {
        box-sizing: border-box;
        vertical-align: top;
        height: calc(100% / 9.01);
        width: calc(100% / 9.01);
        transition: background 0.1s, color 0.5s;
    }

        .grid .cell .cell-content {
            border-bottom: 1px solid #444;
            border-right: 1px solid #444;
            height: 100%;
            width: 100%;
            box-sizing: border-box;
            text-align: center;
            overflow: hidden; /*font-size:0.4em;*/
        }

        .grid .cell.row0 {
            border-top: 0.1em solid #444;
        }

        .grid .cell.column0 {
            border-left: 0.1em solid #444;
        }

        .grid .cell.column8 {
            border-right: 0.1em solid #444;
        }

        .grid .cell.row2,
        .grid .cell.row5,
        .grid .cell.row8 {
            border-bottom: 0.1em solid #444;
        }

            .grid .cell.row2 .cell-content,
            .grid .cell.row5 .cell-content,
            .grid .cell.row8 .cell-content {
                border-bottom: none;
            }

        .grid .cell.column2,
        .grid .cell.column5 {
            border-right: 0.1em solid #444;
        }

            .grid .cell.column2 .cell-content,
            .grid .cell.column5 .cell-content,
            .grid .cell.column8 .cell-content {
                border-right: none;
            }

        .grid .cell .candidates {
            display: none;
            width: 100%;
            height: 100%;
            font-size: 0.30em;
            flex-flow: column nowrap;
        }

            .grid .cell .candidates .candidateRow {
                align-content: stretch;
                align-items: unset;
                display: flex;
                flex-basis: 0;
                flex-flow: row nowrap;
                flex-grow: 1;
                justify-content: space-around;
                width: 100%;
            }


            .grid .cell .candidates .candidate {
                flex-grow: 1;
                display: flex;
                flex-flow: column nowrap;
                justify-content: center;
                visibility: hidden;
                border-radius: 20%;
            }

                .grid .cell .candidates .candidate.visible {
                    visibility: inherit;
                }

        .grid .cell .single {
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            color: darkolivegreen;
        }

        .grid .cell.isbase .single {
            color: inherit;
        }

        .grid .cell.selected,
        .grid .cell.similar-highlight.selected,
        .grid .cell.error.selected {
            background: rgba(135, 214, 0, 0.45); /* greenyellow*/
        }

        .grid .cell.similar-highlight {
            background: rgba(50, 200, 214, 0.35);
        }

        .grid .cell.error {
            background: rgba(255, 106, 0,0.35);
        }

        .grid .cell.checkError {
            background: rgba(255, 20, 0,0.35);
        }

        .grid .cell.active {
            background: rgba(135, 214, 0, 0.45);
        }

        .grid .cell.show-candidates .candidates {
            display: flex;
        }

        .grid .cell.show-candidates .single {
            display: none;
        }

        .grid .cell.glow,
        .grid .cell.glow .single,
        .grid .cell.glow.isbase .single {
            color: #fff;
            transition: none;
        }

        .grid .cell .candidate.hint-ok {
            background: rgba(135, 214, 0, 0.45);
        }

        .grid .cell .candidate.hint-remove {
            background: rgba(255, 106, 0,0.35);
        }

        .grid .cell .candidate.hint-on {
            background: rgba(135, 214, 0, 0.45);
        }

        .grid .cell .candidate.hint-off {
            background: rgba(50, 200, 214, 0.35);
        }

        .grid .cell .candidate.hint-conflict {
            box-shadow: 0px 0px 5px 5px rgba(255, 20, 0,0.35);
        }

        .grid .cell .candidate.hint-seetwo {
            box-shadow: 0px 0px 5px 5px rgba(255, 20, 0,0.35);
        }
